<template>
  <div class="home">
    <div class="bg-wrapper">
      <div class="bg-content"></div>

      <div class="button-container">
        <button class="custom-button" @click="gohome">开始探索</button>
      </div>
    </div>

    <!-- 漂浮气泡层 -->
    <div class="bubbles">
      <div
        v-for="(bubble, index) in bubbles"
        :key="index"
        class="bubble"
        :style="{
          left: bubble.left + '%',
          width: bubble.size + 'px',
          height: bubble.size + 'px',
          animationDuration: bubble.duration + 's',
          animationDelay: bubble.delay + 's',
          opacity: bubble.opacity,
        }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bubbles: [],
    };
  },
  mounted() {
    localStorage.setItem("unitId", "1243");
    // localStorage.setItem("userId", "1");
    localStorage.setItem("userId", "2619138");

    localStorage.setItem("type", "3");
  },

  created() {
    // 创建 50 个随机气泡
    this.bubbles = Array.from({ length: 25 }, () => ({
      left: Math.random() * 100, // 随机水平位置
      size: 10 + Math.random() * 25, // 10~35px 大小
      duration: 8 + Math.random() * 6, // 8~14s 漂浮时长
      delay: Math.random() * 6, // 延时出现
      opacity: 0.5 + Math.random() * 0.5, // 透明度 0.5~1.0
    }));
  },
  methods: {
    gohome() {
      this.$router.push("/trial/cjtitle");
    },
  },
};
</script>

<style scoped>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
.home {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #16fdfe, #fde7f3);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.bg-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-content {
  width: 100%;
  height: 100%;
  background-image: url("https://lesson.iapeap.com/DRM/IMG/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20251025185636_1055_1328.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 气泡容器层 */
.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 气泡样式 */
.bubble {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.3)
  );
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  animation: floatUp linear infinite;
}

/* 修改后的漂浮动画 - 在接近顶部时快速消失 */
@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  70% {
    transform: translateY(-70vh) scale(1.05);
    opacity: 1;
  }
  85% {
    transform: translateY(-85vh) scale(1);
    opacity: 0.8;
  }
  95% {
    transform: translateY(-95vh) scale(0.9);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100vh) scale(0.8);
    opacity: 0;
  }
}
/* 按钮容器样式 */
.button-container {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 80%;
  display: flex;
  justify-content: center;
}

.custom-button {
  outline: none;
  background-color: #f09bc5;
  color: white;
  border: none;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(240, 155, 197, 0.4);
  transition: all 0.3s ease;
  letter-spacing: 1px;
  min-width: 200px;
  position: relative;
  overflow: hidden;
}

.custom-button:hover {
  background-color: #e88bb8;
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(240, 155, 197, 0.6);
}

.custom-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(240, 155, 197, 0.4);
}

.custom-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.custom-button:hover::after {
  left: 100%;
}

.custom-button:focus {
  background-color: #e88bb8;
  box-shadow: 0 0 0 3px rgba(240, 155, 197, 0.5);
}
</style>
